<template>
  <el-scrollbar class="my-aside">
    <el-menu class="my-menu" active-text-color="#ffd04b" unique-opened background-color="#545c64"
      :default-active="defaultActive.path" act router text-color="#fff">
      <el-sub-menu :index="item.path" v-for="(item,index) in routerList" :key="index">
        <template #title>
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
        <el-menu-item v-for="(it,idx) in item.children.filter(t=>t.meta.isMenuItem)" :key="idx" :index="item.path+'/'+it.path">{{ it.meta.title }}</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-scrollbar>
</template>
<script setup>
import { useTabNar } from '@/stores/tabnar';
import { ref ,onMounted} from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const tabNar = useTabNar();
const defaultActive = ref('');
let routerList = ref([])
tabNar.$subscribe(() => {
  defaultActive.value = tabNar.currentTab;
})

onMounted(()=>{
  routerList.value = router.getRoutes().filter(item => item.meta.isSubMenu)
})


</script>
<style lang="less" scoped>
.my-aside {
  width: 200px;
  height: calc(100vh - 60px);
  border-right: 1px solid var(--el-border-color-light);
  box-sizing: border-box;
  background: #545c64;

  .my-menu {
    border: none;
  }
}
</style>